<template>
  <div v-loading="listLoading">
    <el-table  ref="table" v-bind="computedTableOptions" v-on="$listeners" style="width: 100%">
      <slot></slot>
      <!-- <column v-for="(item, index) in 5" :key="index" :options="{label: 'test'}"></column> -->
      <column v-for="(item, index) in computedColumns" :key="index" :options="item"></column>
    </el-table>
    <el-pagination
      class="page-cmp"
      v-if="pageOptions.isShowPage"
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import Column from './Column'
import { Table } from 'element-ui'
export default {
  components: { Column },
  props: {
    pageOptions: { // 配置
      type: Object,
      default() {
        return {}
      }
    },
    columns: { // 表格项配置
      type: Array,
      default() {
        return []
      }
    },
    loadMethod: Function
  },
  data() {
    return {
      listLoading: false,
      page: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        total: 0
      },
      sort: {}
    }
  },
  methods: {
    getPage() {
      return {...this.page}
    },
    /**
     * 设置页码总条数
     */
    setPageTotal(total) {
      this.page.total = total
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.queryPageData()
    },
    handleCurrentChange(pageNum) {
      this.page.currentPage = pageNum
      this.queryPageData(true)
    },
    /**
     * 查询数据
     * @param {Boolean} unResetPageNum 是否不重置页码
     */
    queryPageData(unResetPageNum) {
      if (!unResetPageNum) {
        this.page.currentPage = 1
      }
      this.loadPageData()
    },
    /**
     * 接口查询表格数据
     */
    async loadPageData() {
      if (typeof this.loadMethod === 'function') {
        this.listLoading = true
        try {
          let param = Object.assign({}, this.sort, this.page)
          let data = await this.loadMethod(param)
          this.page.total = data.total || 0
        } catch (e) {}
        this.listLoading = false
      }
    }
  },
  computed: {
    computedTableOptions() {
      let keys = Object.keys(Table.props).map(key => key.toLocaleUpperCase())
      let result = {}
      for (let key in this.$attrs) {
        if (keys.indexOf(key.replace(/-/g, '').toLocaleUpperCase()) > -1) {
          result[key] = this.$attrs[key]
        }
      }
      return result
    },
    computedColumns() {
      let result = []
      if (this.columns.length === 1) {
        result = Object.assign([], ...this.columns)
      }
      if (this.columns.length > 1) {
        let arr = Object.assign([], this.columns)
        for (let i = arr.length - 1; i < 1; i--) {
          let pre = arr[i - 1]
          let nw = arr[i]
          pre.forEach(item => {
            nw.forEach(el => {
              if (el.parent === item.prop) {
                item.children = item.children || []
                item.children.push(el)
              }
            })
          })
        }
        result = arr[0]
      }
      return result
    }
  }
}
</script>
<style lang="scss" scoped>
.page-cmp {
  margin-top: 15px;
}
/deep/ .el-table .cell {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
</style>
